<template>
  <!-- default-active="1" -->
  <div>
    <el-menu v-loading="loading"
             :default-active="$route.path"
             :default-openeds="openedsList"
             router
             class="el-menu-vertical-demo">
      <el-submenu :index="index + ''"
                  v-for="(item, index) in typeData"
                  :key="index">
        <template slot="title">
          <span class="submenu-txt"
                v-if="item.menuName.length <= 5">{{
          item.menuName
        }}</span>
          <el-tooltip class="item"
                      effect="dark"
                      :content="item.menuName"
                      placement="top"
                      v-else>
            <span class="submenu-txt">{{
            orderNameIntercept(item.menuName)
          }}</span>
          </el-tooltip>
        </template>
        <el-menu-item-group>
          <div class="divider"></div>
          <el-menu-item style="overflow:hidden"
                        class="el-menu-show"
                        v-for="nodeItem in item.workOrderFilterMenuList"
                        :key="nodeItem.id"
                        :index="'/orderTable/' + nodeItem.id"
                        :class="urlRoute == nodeItem.id ? 'is-active-visit' : ''"
                        @click="changeType(nodeItem,item)">
            <el-badge v-if="nodeItem.count || nodeItem.count == 0"
                      :value="nodeItem.count">
              <span :class="urlRoute == nodeItem.id ? 'el-button--primary' : 'work-order-dot'"></span>
              <span v-if="nodeItem.name.length <= 8">{{ nodeItem.name }}</span>
              <el-tooltip class="item"
                          effect="dark"
                          :content="nodeItem.name"
                          placement="top"
                          v-else>
                <span>{{ orderNameIntercept(nodeItem.name) }}</span>
              </el-tooltip>
            </el-badge>
            <div v-else>
              <span :class="urlRoute == nodeItem.id ? 'el-button--primary' : 'work-order-dot'"></span>
              <span v-if="nodeItem.name.length <= 8">{{ nodeItem.name }}</span>
              <el-tooltip class="item"
                          effect="dark"
                          :content="nodeItem.name"
                          placement="top"
                          v-else>
                <span>{{ orderNameIntercept(nodeItem.name) }}</span>
              </el-tooltip>
            </div>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import { selectByUserId } from "@/api/workOrderController";
export default {
  // porps: ['chooseId'],
  data () {
    return {
      loading: true,
      isCollapse: true,
      typeData: [],
      openedsList: ["0"],
      urlRoute: "",
      urlOrder: "",
      bool: true,
    };
  },
  mounted () {
    if (this.userId) {
      // this.selectByUserId();
    }
  },
  created () {
    var url = window.location.href;
    let urls = url.split("/");
    this.urlRoute = urls[5];
  },
  computed: {
    userId () {
      let user = this.$store.getters.userId || sessionStorage.getItem('userIds');
      if (user) {
        this.selectByUserId(user);
      }
      return user;
    },
    isEndSessionFun () {
      return this.$store.state.workOrderText;
    },

    isorderChangeFun () {
      return this.$store.state.orderClose;
    },
  },
  watch: {
    userId (newVal, oldVal) {
      this.userId = newVal
      if (this.userId) {
        this.selectByUserId();
      }
      this.bool = false;
    },
    isEndSessionFun (newVal, oldVal) {
      // this.selectByUserId();
    },
    isorderChangeFun (newVal, oldVal) {
      // this.selectByUserId();
    },
    $route (to, from) {
      // 除详情/工单本身以外界面的跳转时，将过滤器重置为第一条
      // if (to.name === "orderTable") {
      //   this.bool = true;
      //   this.selectByUserId();
      // }
      if (this.$route.fullPath.split("/")[1] === "orderTable") {
        if (to.name !== 'orderTable' && from.name !== "orderTable") {
          this.typeData = []
        }
        let urlRoutes = to.path;
        urlRoutes = urlRoutes.split("/");
        this.urlOrder = urlRoutes[1];
        this.urlRoute = urlRoutes[2];
        this.bool = true;
        // if (this.userId) {
        // this.selectByUserId();
        // }
      }
    }
  },
  methods: {
    orderNameIntercept (name) {
      return name.substring(0, 8) + "...";
    },
    changeType (val, item) {
      this.$store.commit("orderTypeIdFun", val.id);
      this.$store.commit("orderTypeNameFun", val.name);
      this.$store.commit("workOrderTypeIdFun", val.workOrderTypeId);
      this.$store.commit("typeDataIdFun", item.id);
      this.$emit("hadleaddTab", val.id);
      this.urlRoute = val.id;

    },
    selectByUserId (user) {
      let _this = this;
      if (!user && (_this.userId && _this.userId == "")) {
        return;
      }
      let id = user || _this.userId;
      selectByUserId(id).then(res => {
        let data = res.data;


        if (data.retCode === 200) {
          _this.loading = false;
          _this.typeData = data.data;
          // _this.typeData.push( _this.gaoyaData)
          if (_this.typeData != "") {
            _this.$emit(
              "hadleName",
              _this.typeData[0].workOrderFilterMenuList[0]
            );
            _this.$store.commit(
              "orderTypeIdFun",
              _this.typeData[0].workOrderFilterMenuList[0].id
            );
            if (_this.bool && _this.$route.path === "/orderTable/index") {
              if (_this.typeData.length > 0 && _this.typeData[0].workOrderFilterMenuList.length > 0) {
                _this.$emit('sendChooseId', _this.typeData[0].workOrderFilterMenuList[0].id)
                _this.$emit("hadleaddTab", _this.typeData[0].workOrderFilterMenuList[0].id);
                _this.$store.commit("orderTypeIdFun", _this.typeData[0].workOrderFilterMenuList[0].id);
                _this.$store.commit("orderTypeNameFun", _this.typeData[0].workOrderFilterMenuList[0].name);
                _this.$store.commit("workOrderTypeIdFun", _this.typeData[0].workOrderFilterMenuList[0].workOrderTypeId);
                _this.$store.commit("typeDataIdFun", _this.typeData[0].id);
                // _this.$router.push("/orderTable/" + _this.typeData[0].workOrderFilterMenuList[0].id);
                _this.bool = false;
              }
            }
          } else {
            _this.bool = true;
          }
        }
      });
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style scoped>
.submenu-txt {
  font-weight: 700;
  color: #231815;
  font-size: 13px;
  font-family: Microsoft YaHei;
  line-height: 0;
  padding: 0 16px;
}

.el-button--primary,
.work-order-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  padding: 0;
  border: none;
  margin-right: 10px;
}
.work-order-dot {
  background-color: #c7c7c9;
}
.divider {
  height: 1px;
  width: 85%;
  background: #e2e2e2;
  margin: 0 auto 16px;
}

>>> .el-menu-item-group__title {
  padding: 0;
}

.el-menu-show {
  height: 40px;
  line-height: 40px;
}

.el-submenu .el-menu-item {
  padding: 0 36px !important;
}
>>> .el-badge__content.is-fixed {
  right: 0;
  top: 10px;
}
.el-menu .is-active-visit {
  font-weight: 600;
}
</style>
